Part-DB / Part-DB-symfony

 *

 * part-db version 0.1

 * Copyright (C) 2005 Christoph Lechner

 * http://www.cl-projects.de/

 *

 * part-db version 0.2+

 * Copyright (C) 2009 K. Jacobs and others (see authors.php)

 * http://code.google.com/p/part-db/

 *

 * Part-DB Version 0.4+

 * Copyright (C) 2016 - 2019 Jan Böhmer

 * https://github.com/jbtronics

 *

 * This program is free software; you can redistribute it and/or

 * modify it under the terms of the GNU General Public License

 * as published by the Free Software Foundation; either version 2

 * of the License, or (at your option) any later version.

 *

 * This program is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

 * GNU General Public License for more details.

 *

 * You should have received a copy of the GNU General Public License

 * along with this program; if not, write to the Free Software

 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA

 *

 */

import * as Cookies from "js-cookie";

/**

 * Extract the title (The name between the <title> tags) of a HTML snippet.

 * @param {string} html The HTML code which should be searched.

 * @returns {string} The title extracted from the html.

 */

function extractTitle(html : string) : string {

    let title : string = "";

    let regex = /<title>(.*?)<\/title>/gi;

    if (regex.test(html)) {

        let matches = html.match(regex);

        for(let match in matches) {

            title = $(matches[match]).text();

        }

    }

    return title;

}

class AjaxUI {

    protected BASE = "/";

    private trees_filled : boolean = false;

    private statePopped : boolean = false;

    public xhr : XMLHttpRequest;

    public constructor()

    {

        //Make back in the browser go back in history

        window.onpopstate = this.onPopState;

        $(document).ajaxError(this.onAjaxError.bind(this));

        //$(document).ajaxComplete(this.onAjaxComplete.bind(this));

    }

    /**

     * Starts the ajax ui und execute handlers registered in addStartAction().

     * Should be called in a document.ready, after handlers are set.

     */

    public start(disabled : boolean = false)

    {

        if(disabled) {

            return;

        }

        console.info("AjaxUI started!");

        this.BASE = $("body").data("base-url") + "/";

        console.info("Base path is " + this.BASE);

        //Show flash messages

        $(".toast").toast('show');

        /**

         * Save the XMLHttpRequest that jQuery used, to the class, so we can acess the responseURL property.

         * This is a work-around as long jQuery does not implement this property in its jQXHR objects.

         */

        //@ts-ignore

        jQuery.ajaxSettings.xhr = function () {

            //@ts-ignore

            let xhr = new window.XMLHttpRequest();

            //Save the XMLHttpRequest to the class.

            ajaxUI.xhr = xhr;

            return xhr;

        };

        this.registerLinks();

        this.registerForm();

        this.fillTrees();

        this.initDataTables();

        //Trigger start event

        $(document).trigger("ajaxUI:start");

    }

    }

    /**

     * Load the given url into the tree with the given id.

     * @param target_id

     * @param datasource

     */

    protected treeLoadDataSource(target_id, datasource) {

        let text : string = $(".tree-btns[data-mode='" + datasource + "']").html();

        text = text + " \n<span class='caret'></span>"; //Add caret or it will be removed, when written into title

        switch(datasource) {

            case "categories":

                ajaxUI.initTree("#" + target_id, 'tree/categories');

                break;

            case "locations":

                ajaxUI.initTree("#" + target_id, 'tree/locations');

                break;

            case "footprints":

                ajaxUI.initTree("#" + target_id, 'tree/footprints');

                break;

            case "manufacturers":

                ajaxUI.initTree("#" + target_id, 'tree/manufacturers');

                break;

            case "suppliers":

                ajaxUI.initTree("#" + target_id, 'tree/suppliers');

                break;

            case "tools":

                ajaxUI.initTree("#" + target_id, 'tree/tools');

                break;

            case "devices":

                ajaxUI.initTree("#" + target_id, 'tree/devices');

                break;

        }

        $( "#" + target_id + "-title").html(text);

    }

    /**

     * Fill a treeview with data from the given url.

     * @param tree The Jquery selector for the tree (e.g. "#tree-tools")

     * @param url The url from where the data should be loaded

     */

    public initTree(tree, url) {

        //let contextmenu_handler = this.onNodeContextmenu;

        $.getJSON(ajaxUI.BASE + url, function (data) {

            // @ts-ignore

            $(tree).treeview({

                data: data,

                enableLinks: false,

                showIcon: false,

                showBorder: true,

                searchResultBackColor: '#ffc107',

                searchResultColor: '#000',

                onNodeSelected: function(event, data) {

                    if(data.href) {

                        ajaxUI.navigateTo(data.href);

                    }

                },

                //onNodeContextmenu: contextmenu_handler,

                expandIcon: "fas fa-plus fa-fw fa-treeview", collapseIcon: "fas fa-minus fa-fw fa-treeview"})

                .on('initialized', function() {

                    $(this).treeview('collapseAll', { silent: true });

                    //Implement searching if needed.

                    if($(this).data('treeSearch')) {

                        let _this = this;

                        let $search = $($(this).data('treeSearch'));

                        $search.on( 'input', function() {

                            $(_this).treeview('collapseAll', { silent: true });

                            $(_this).treeview('search', [$search.val()]);

                        });

                    }

                });

        });

    }

    /**

     * Register all links, for loading via ajax.

     */

    public registerLinks()

    {

        // Unbind all old handlers, so the things are not executed multiple times.

        $('a').not(".link-external, [data-no-ajax], .page-link, [href^='#']").unbind('click').click(function (event) {

                let a = $(this);

                let href = $.trim(a.attr("href"));

                //Ignore links without href attr and nav links ('they only have a #)

                if(href != null && href != "" && href.charAt(0) !== '#') {

                    event.preventDefault();

                    ajaxUI.navigateTo(href);

                }

            }

        );

        console.debug('Links registered!');

    }

    protected getFormOptions() : JQueryFormOptions

    {

        return  {

            success: this.onAjaxComplete,

            beforeSerialize: function() : boolean {

                //Update the content of textarea fields using CKEDITOR before submitting.

                //@ts-ignore

                if(typeof CKEDITOR !== 'undefined') {

                    //@ts-ignore

                    for (let name in CKEDITOR.instances) {

                        //@ts-ignore

                        CKEDITOR.instances[name].updateElement();

                    }

                }

                return true;

            },

            beforeSubmit: function (arr, $form, options) : boolean {

                //When data-with-progbar is specified, then show progressbar.

                if($form.data("with-progbar") != undefined) {

                    ajaxUI.showProgressBar();

                }

                return true;

            }

        };

    }

    /**

     * Register all forms for loading via ajax.

     */

    public registerForm()

    {

        let options = this.getFormOptions();

        $('form').not('[data-no-ajax]').ajaxForm(options);

        console.debug('Forms registered!');

    }

    /**

     * Submits the given form via ajax.

     * @param form The form that will be submmitted.

     */

    public submitForm(form)

    {

        let options = ajaxUI.getFormOptions();

        $(form).ajaxSubmit(options);

    }

    /**

     * Show the progressbar

     */

    public showProgressBar()

    {

        //Blur content background

        $('#content').addClass('loading-content');

        // @ts-ignore

        $('#progressModal').modal({

            keyboard: false,

            backdrop: false,

            show: true

        });

    }

    /**

     * Hides the progressbar.

     */

    public hideProgressBar()

    {

        // @ts-ignore

        $('#progressModal').modal('hide');

        //Remove the remaining things of the modal

        $('.modal-backdrop').remove();

        $('body').removeClass('modal-open');

        $('body, .navbar').css('padding-right', "");

    }

    /**

     * Navigates to the given URL

     * @param url The url which should be opened.

     * @param show_loading Show the loading bar during loading.

     */

    public navigateTo(url : string, show_loading : boolean = true)

    {

        if(show_loading) {

            this.showProgressBar();

        }

        $.ajax(url, {

            success: this.onAjaxComplete

        });

        //$.ajax(url).promise().done(this.onAjaxComplete);

    }

    /**

     * Called when an error occurs on loading ajax. Outputs the message to the console.

     */

    private onAjaxError (event, request, settings) {

        'use strict';

        //Ignore aborted requests.

        if (request.statusText =='abort') {

            return;

        }

        console.error("Error getting the ajax data from server!");

        console.log(event);

        console.log(request);

        console.log(settings);

        ajaxUI.hideProgressBar();

        //Create error text

        let title = "";

        switch(request.status) {

            case 500:

               title =  'Internal Server Error!';

               break;

            case 404:

                title = "Site not found!";

                break;

            case 403:

                title = "Permission denied!";

                break;

        }

       var alert = bootbox.alert(

            {

                size: 'large',

                message: function() {

                    let msg = "Error getting data from Server! <b>Status Code: " + request.status + "</b>";

                    msg += '<br><br><a class=\"btn btn-link\" data-toggle=\"collapse\" href=\"#iframe_div\" >' + 'Show response' + "</a>";

                    msg += "<div class=\" collapse\" id='iframe_div'><iframe height='512' width='100%' id='iframe'></iframe></div>";

                    return msg;

                },

                title: title,

                callback: function () {

                    //Remove blur

                    $('#content').removeClass('loading-content');

                }

            });

        //@ts-ignore

        alert.init(function (){

            var dstFrame = document.getElementById('iframe');

        //@ts-ignore

        var dstDoc = dstFrame.contentDocument || dstFrame.contentWindow.document;

        dstDoc.write(request.responseText);

        dstDoc.close();

        });

        //If it was a server error and response is not empty, show it to user.

        if(request.status == 500 && request.responseText !== "")

        {

            console.log("Response:" + request.responseText);

        }

    }

    /**

     * This function gets called every time, the "back" button in the browser is pressed.

     * We use it to load the content from history stack via ajax and to rewrite url, so we only have

     * to load #content-data

     * @param event

     */

    private onPopState(event)

    {

        let page : string = location.href;

        ajaxUI.statePopped = true;

        ajaxUI.navigateTo(page);

    }

    /**

     * This function takes the response of an ajax requests, and does the things we need to do for our AjaxUI.

     * This includes inserting the content and pushing history.

     * @param responseText

     * @param textStatus

     * @param jqXHR

     */

    private onAjaxComplete(responseText: string, textStatus: string, jqXHR: any)

    {

        console.debug("Ajax load completed!");

        ajaxUI.hideProgressBar();

        /* We need to do the url checking before the parseHTML, so that we dont get wrong url name, caused by scripts

           in the new content */

        // @ts-ignore

        let url = this.url;

        //Check if we were redirect to a new url, then we should use that as new url.

        if(ajaxUI.xhr.responseURL) {

            url = ajaxUI.xhr.responseURL;

        }

        //Parse response to DOM structure

        //We need to preserve javascript, so the table ca

        let dom = $.parseHTML(responseText, document, true);

        //And replace the content container

        $("#content").replaceWith($("#content", dom));

        //Replace login menu too (so everything is up to date)

        $("#login-content").replaceWith($('#login-content', dom));

        //Replace flash messages and show them

        $("#message-container").replaceWith($('#message-container', dom));

        $(".toast").toast('show');

        //Set new title

        let title  = extractTitle(responseText);

        document.title = title;

        //Push to history, if we currently arent poping an old value.

        if(!ajaxUI.statePopped) {

            history.pushState(null, title, url);

        } else {

            //Clear pop state

            ajaxUI.statePopped = true;

        }

        //Do things on the new dom

        ajaxUI.registerLinks();

        ajaxUI.registerForm();

        ajaxUI.initDataTables();

        //Trigger reload event

        $(document).trigger("ajaxUI:reload");

    }

    /**

     * Init all datatables marked with data-datatable based on their data-settings attribute.

     */

    protected initDataTables()

    {

        //Find all datatables and init it.

        let $tables = $('[data-datatable]');

        $.each($tables, function(index, table) {

            let $table = $(table);

            let settings = $table.data('settings');

            //@ts-ignore

            var promise = $('#part_list').initDataTables(settings,

                {

                    "fixedHeader": { header: $(window).width() >= 768, //Only enable fixedHeaders on devices with big screen. Fixes scrolling issues on smartphones.

                        headerOffset: $("#navbar").height()}

                });

            //Register links.

            promise.then(function() {

                ajaxUI.registerLinks();

                //Set the correct title in the table.

                let title = $('#part-card-header-src');

                $('#part-card-header').html(title.html());

                //Attach event listener to update links after new page selection:

                $('#dt').on('draw.dt', function() {

                    ajaxUI.registerLinks();

                });

            });

        });

        console.debug('Datatables inited.');

    }

}